<template>
  <div class="recommend">
    <!-- 推荐歌单 -->
    <RecommendPlayList :currentRecommends="currentRecommends"
      >推荐歌单</RecommendPlayList
    >
    <!-- 最新音乐 -->
    <RecommendNewMusic
      @update:music="$emit('update:music', $event)"
      @update:playlist="$emit('update:playlist', $event)"
      :newSongs="newSongs"
      :paused="$attrs.paused"
      :currentMusic="$attrs.currentMusic"
      >最新音乐</RecommendNewMusic
    >

    <Recommend-Foo></Recommend-Foo>
  </div>
</template>

<script>
import RecommendPlayList from "@/components/RecommendPlayList.vue";
import RecommendNewMusic from "@/components/RecommendNewMusic.vue";
import RecommendFoo from "@/components/RecommendFoo.vue";

export default {
  data: function () {
    return {
      recommends: [],
      newSongs: [],
      count: 0,
      recommendsIndex: 0,
    };
  },
  activated() {
    console.log("切换到推荐");
    window.onscroll = null;
    this.recommendsIndex =
      this.recommendsIndex >= 4 ? 0 : this.recommendsIndex + 1;
  },
  computed: {
    currentRecommends: function () {
      return this.recommends.slice(
        this.recommendsIndex * 6,
        (this.recommendsIndex + 1) * 6
      );
    },
  },
  components: {
    RecommendPlayList,
    RecommendNewMusic,
    RecommendFoo,
  },
  created() {
    this.$root.isShowLoading = true;
    this.axios
      .get("/personalized")
      .then((response) => {
        // console.log(response.data.result);
        this.recommends = response.data.result;
      })
      .finally(() => {
        this.count += 1;
      });

    this.axios
      .get("/personalized/newsong")
      .then((response) => {
        // console.log(response.data.result);
        this.newSongs = response.data.result;
      })
      .finally(() => {
        this.count += 1;
      });
  },
  watch: {
    count(n) {
      if (n >= 2) {
        this.$root.isShowLoading = false;
      }
    },
  },
};
</script>

<style>
.recommend{
  margin-top: 135px;
}
</style>